<template>
	<div class="copyright-content">
		<div id="copy_right_content">
			<div class="add-automatic-content">
				<div class="top-header">
					<div class="header-div-one" :class = "colorOne">1.填写作品基本信息(必填)</div>
					<div class="header-div-two" :class = "colorTwo">2.文件上传及确权(非必填)</div>
					<div class="header-div-three" :class = "colorThree">3.完善权利信息(非必填)</div>
				</div>
				<div class="header_line">
					<span :class="header_line_one"></span>
					<span :class="header_line_two"></span>
					<span :class="header_line_three"></span>
				</div>
				<automaticAddOne v-if="automaticStatus === 'one'" @changestepstatus="changestepstatus"></automaticAddOne>
				<automaticAddTwo v-else-if="automaticStatus === 'two'" @changestepstatus="changestepstatus"></automaticAddTwo>
				<automaticAddThree v-else @changestepstatus="changestepstatus"></automaticAddThree>
				
			</div>
			
		</div>
	</div>
</template>

<script>
	import automaticAddOne from "./warehouseAddOne";
	import automaticAddTwo from "./warehouseAddTwo";
	import automaticAddThree from "./warehouseAddThree";
	export default {
	  name: "copyRight",
	   components: {
		    automaticAddOne,
			automaticAddTwo,
			automaticAddThree
	  	},
	  data() {
	    return {
			// 顶部选中撞他
			automaticStatus:'one',
			colorOne:{
				headerColor:true,
			},
			colorTwo:{
				headerColor:false,
			},
			colorThree:{
				headerColor:false,
			},
			header_line_one:{
				header_line_one:true,
			},
			header_line_two:{
				header_line_two:false
			},
			header_line_three:{
				header_line_three:false,
			},
	    };
	  },
	  methods: {
	  	// 切换顶部状态
		changestepstatus(value){
			console.log("value="+value);
			if(value === 'two'){
				this.colorOne={
					headerColor:false,
				};
				this.colorTwo={
					headerColor:true,
				};
				this.colorThree={
					headerColor:false,
				};
				this.header_line_one={
					header_line_one:false,
				};
				this.header_line_two={
					header_line_two:true
				};
				this.header_line_three={
					header_line_three:false,
				};
			}else if(value === 'three'){
				this.colorOne={
					headerColor:false,
				};
				this.colorTwo={
					headerColor:false,
				};
				this.colorThree={
					headerColor:true,
				};
				this.header_line_one={
					header_line_one:false,
				};
				this.header_line_two={
					header_line_two:false
				};
				this.header_line_three={
					header_line_three:true,
				};
			}else{
				this.colorOne={
					headerColor:true,
				};
				this.colorTwo={
					headerColor:false,
				};
				this.colorThree={
					headerColor:false,
				};
				this.header_line_one={
					header_line_one:true,
				};
				this.header_line_two={
					header_line_two:false,
				};
				this.header_line_three={
					header_line_three:false,
				};
			}
			this.automaticStatus = value;
		}
	  },
	
	  beforeMount: function() {
	    // console.log("47")
	  },
	  mounted: function() {
	    // console.log("7777777777")
	  },
	  
	};
</script>

<style scoped="scoped">
	@import '../copyRight.css';
	@import '../automaticAdd/automaticAdd.css';
	.top-header{
		padding: 0 109px;
		padding-top: 6px;
	}
	.header_line .header_line_one{
		width: 236px;
		left: 100px;
	}
	.header_line .header_line_two{
		width: 236px;
	}
	.header_line .header_line_three{
		width: 236px;
		right: 110px;
	}
	.cont_one .cont_one_view {
    width: auto;
	}
</style>